<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width , user-scalable=no,initial-scale=1.0" />
<link rel="stylesheet" href="/css/myhome/common.css">
<link rel="stylesheet" href="/css/myhome/table.css">
<script src="/js/common_lib/jquery-1.7.min.js"> </script>
<script src="/js/my_lib/HashMap.js"> </script>
<script src="/js/my_lib/DragDrop.js"> </script>
<script src="/js/my_lib/Class.js"> </script>
<script src="/js/my_lib/Util.js"> </script>
<script src="/js/my_lib/DataStructure2.js"> </script>
<script src="/js/my_lib/Hist.js"> </script>
<script type="text/javascript">

	$(document).ready(function() {
		
		var dragDrop = new DragDrop();
	
		dragDrop.addDragELement('widget1' , '.dragHandler');
		dragDrop.addDragELement('widget2' , '.dragHandler');
		dragDrop.addDragELement('widget3' , '.dragHandler');
		dragDrop.addDragELement('widget4' , '.dragHandler');
		
		dragDrop.addDropTarget('area1');
		dragDrop.addDropTarget('area2');
		dragDrop.addDropTarget('area3');
		
		dragDrop.run();
		
		var hh = new Hist();
		hh.setTargetDiv('mainContents');
	//	hh.addPage('', '/_blank.jsp');
		hh.addPage('page1', '/myhome/page1.jsp');
		hh.addPage('page2', '/myhome/page2.jsp');
		hh.addPage('page3', '/myhome/page3.jsp');
		
		$('._link').click(function(e){
			var pageId = $(this).attr('pageid');
			hh.goUrl(pageId , {} , e);
		});
		var lst = new com.zpyr.List();
		lst.put('1');
		lst.put('2');
		lst.put('3');
		lst.put('4');
		lst.remove(2);
		lst.put('5');
		console.log(lst);
		var sLst = new com.zpyr.StorageList('strLst1');
		console.log(sLst);
		var sLst2 = new com.zpyr.StorageList('strLst2');
		console.log(sLst2);
	});
	
	
</script>
</head>
<body>

<article style="width:90%; margin-left:5%;">
	<div id="title" class="whole_area" style="width:100%; min-width:800px; height:100px; margin-bottom: 5px;">
		<p class="text_subject" style="text-align: center;">BJS Zepyr's Homepage</p>
	</div>
	<div id="mainContents" class="whole_area" style="width:100%; min-width:800px; height:100%; min-height:700px;">
		<table width="100%;">
		<tr>
		<td id="area1" width="33%" style="vertical-align: top;">
		<div id="widget1" >
			<div class="widget_box" id="wg_dday">
				<table summary="D-DAY위젯">
				<caption class="dragHandler">D-DAY</caption>
				<colgroup>
				<col><col width="120px"><col width="100px">
				</colgroup>
				<thead>
				<tr>
				<th>D-Day</th>
				<th>날짜</th>
				<th>Remain</th>
				</tr>
				</thead>
				<tfoot>
				<tr><td colspan="3"></td></tr>
				</tfoot>
				<tbody>
				<tr>
				<td >100일</td>
				<td >2012-10-12</td>
				<td >6</td>
				</tr>
				</tbody>
				</table>
			</div>
		</div>
		<div id="widget2" dragHandler=".dragHandler">
		<div class="widget_box">
		<p class="dragHandler">여기서 드래그</p>
		widget2
		</div>
		</div>
		</td>
		<td id="area2" width="33%" style="vertical-align: top;">
		<div id="widget3" class="widget_box" dragHandler=".dragHandler">
		<p>여기서 드래그</p>
		widget3</div>
		</td>
		<td id="area3" width="33%" style="vertical-align: top;">
		<div id="widget4" class="widget_box">widget4</div>
		</td>
		</tr>
		</table>
	</div>
</article>

</body>
</html>